<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>21-slot插槽的基本使用</title>
  
</head>

<body>
  <div id="app">

    <!-- <navbar>
      <button slot="left">返回</button>
      <button slot="right">菜单</button>
    </navbar> -->

    <!-- 作用域参数插槽使用案例 -->
    <!-- <navbar>
      <template slot-scope="slot" slot="booklist">
        <span v-for="(book,index) in slot.data">{{book}} - </span>
      </template>
    </navbar> -->


  </div>

  <template id="navigition-bar">
    <div>
      <div>
        <slot name="left">返回</slot>
        <slot name="center">标题</slot>
        <slot name="right">菜单</slot>
      </div>
      <slot name="booklist" :data="books">
        <ul>
          <li v-for="(book,index) in books">{{book}}</li>
        </ul>
      </slot>
    </div>
  </template>

  <template id="todo-list">
    <ul>
      <li v-for="( item, index ) in items">
        <slot :item="item" :index="index" :another-attribute="anotherAttribute"></slot>
      </li>
    </ul>
  </template>


  <script src="./js/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data() {
        return {
          slotProps: ["JavaScript", "C++", "Swfit", "HTML"]
        }
      },
      components: {
        navbar: {
          template: "#navigition-bar",
          data() {
            return {
              books: ["JavaScript", "C++", "Swfit", "HTML"]
            }
          }
        }
      }
    });
    app.component('todo-list', {
        data() {
          return {
            items: ['Feed a cat', 'Buy milk']
        }
      },
      template: "#todo-list",
    })
  </script>

</body>

</html>